<template>
	<view style="display: flex;flex-direction: column;">
		
		<view class="content-card bottom-space">

			<view class="title-dot">库存信息</view>

			<view class="item-car" style="padding: 12rpx 23rpx;">

				<view class="order-item-wrap">
					<text class="name">工单类型</text>
					<text class="value">{{datadetail.workOrderType | workOrderType}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">工单状态</text>
					<text class="value">{{datadetail.workOrderStatus | workOrderStatus}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">占用/释放时间</text>
					<text class="value">{{datadetail.carUsageStartTime|filterNull }}~{{ datadetail.carUsageEndTime|filterNull}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">车牌号</text>
					<text class="value">{{datadetail.carLicenceNum|filterNull}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">关联订单</text>
					<text class="value">{{datadetail.orderEncryptId|filterNull}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">携程</text>
          <div class="value">
            <div v-if="datadetail.statusMap && datadetail.statusMap.xc">
              {{statusType(datadetail.workOrderType,datadetail.statusMap.xc.status)}}&nbsp;&nbsp;&nbsp;
              {{datadetail.statusMap.xc.carUsageTime||''}}
              <span v-if="statusFlag(datadetail.statusMap.xc.status)" style="color: red;">
                &nbsp;&nbsp;&nbsp;失败原因:{{datadetail.statusMap.xc.status | otaOrderStatus}}</span>
            </div>
            <span v-else>--</span>
          </div>
				</view>

				<view class="order-item-wrap">
					<text class="name">飞猪</text>
          <div class="value">
            <div v-if="datadetail.statusMap && datadetail.statusMap.fz">
              {{statusType(datadetail.workOrderType,datadetail.statusMap.fz.status)}}&nbsp;&nbsp;&nbsp;
              {{datadetail.statusMap.fz.carUsageTime||''}}
              <span v-if="statusFlag(datadetail.statusMap.fz.status)" style="color: red;">
                &nbsp;&nbsp;&nbsp;失败原因:{{datadetail.statusMap.fz.status | otaOrderStatus}}</span>
            </div>
            <span v-else>--</span>
          </div>
				</view>

				<view class="order-item-wrap">
					<text class="name">凹凸</text>
          <div class="value">
            <div v-if="datadetail.statusMap && datadetail.statusMap.at">
              {{statusType(datadetail.workOrderType,datadetail.statusMap.at.status)}}&nbsp;&nbsp;&nbsp;
              {{datadetail.statusMap.at.carUsageTime||''}}
              <span v-if="statusFlag(datadetail.statusMap.at.status)" style="color: red;">
                &nbsp;&nbsp;&nbsp;失败原因:{{datadetail.statusMap.at.status | otaOrderStatus}}</span>
            </div>
            <span v-else>--</span>
          </div>
				</view>

				<view class="order-item-wrap">
					<text class="name">哈啰</text>
          <div class="value">
            <div v-if="datadetail.statusMap && datadetail.statusMap.hl">
              {{statusType(datadetail.workOrderType,datadetail.statusMap.hl.status)}}&nbsp;&nbsp;&nbsp;
              {{datadetail.statusMap.hl.carUsageTime||''}}
              <span v-if="statusFlag(datadetail.statusMap.hl.status)" style="color: red;">
                &nbsp;&nbsp;&nbsp;失败原因:{{datadetail.statusMap.hl.status | otaOrderStatus}}</span>
            </div>
            <span v-else>--</span>
          </div>
				</view>

				<view class="order-item-wrap">
					<text class="name">悟空</text>
          <div class="value">
            <div v-if="datadetail.statusMap && datadetail.statusMap.wk">
              {{statusType(datadetail.workOrderType,datadetail.statusMap.wk.status)}}&nbsp;&nbsp;&nbsp;
              {{datadetail.statusMap.wk.carUsageTime||''}}
              <span v-if="statusFlag(datadetail.statusMap.wk.status)" style="color: red;">
                &nbsp;&nbsp;&nbsp;失败原因:{{datadetail.statusMap.wk.status | otaOrderStatus}}</span>
            </div>
            <span v-else>--</span>
          </div>
				</view>

				<view class="order-item-wrap">
					<text class="name">租租车</text>
          <div class="value">
            <div v-if="datadetail.statusMap && datadetail.statusMap.zzc">
              {{statusType(datadetail.workOrderType,datadetail.statusMap.zzc.status)}}&nbsp;&nbsp;&nbsp;
              {{datadetail.statusMap.zzc.carUsageTime||''}}
              <span v-if="statusFlag(datadetail.statusMap.zzc.status)" style="color: red;">
                &nbsp;&nbsp;&nbsp;失败原因:{{datadetail.statusMap.zzc.status | otaOrderStatus}}</span>
            </div>
            <span v-else>--</span>
          </div>
				</view>

        <view class="order-item-wrap">
          <text class="name">操作时间</text>
          <text class="value">{{datadetail.createTime|filterNull}}</text>
        </view>

        <view class="order-item-wrap">
          <text class="name">账号</text>
          <text class="value">{{datadetail.createByName|filterNull}}</text>
        </view>


			</view>

		</view>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				datadetail: {}
			}
		},
		methods: {
      statusType(type,status){
        if(type === 1){
          if(status === 0){
            return '占用中';
          }
          if(status === 1 || status === 4 || status === 7 || status === 8 || status === 9 || status === 10 || status === 11){
            return '占用失败';
          }
          if(status === 2){
            return '占用成功';
          }
        }
        if(type === 2){
          if(status === 6){
            return '释放中';
          }
          if(status === 1 || status === 5 || status === 7  || status === 9 || status === 10 || status === 11){
            return '释放失败';
          }
          if(status === 3){
            return '释放成功';
          }
        }
      },
      statusFlag(status){
        if(status !== 0 && status !== 2 && status !== 3 && status !== 6){
          return true;
        }
        return false;
      },
		},
		onLoad(op) {
      this.datadetail = getApp().globalData.otaStorageDetail
		}
	}
</script>

<style lang="scss" scoped>
	.item-car {
		background-color: #FAFAFA;
		border-radius: 8rpx;
		margin: 23rpx 23rpx 0;
		display: flex;
		flex-direction: column;
		padding: 32rpx 23rpx;

		.carno {
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.store {
			margin-top: 23rpx;
			color: #666;
			font-size: 28rpx;
			display: flex;

			text {
				flex: 1;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.order-item-wrap {
		height: 85rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;

		.name {
			font-size: 28rpx;
			color: #666;
		}

		.value {
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
			flex: 1;
			text-align: end;
			margin-left: 10rpx;
		}
	}

	.content-card {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 16rpx;
		background-color: white;

	}

	.title-dot {
		margin-left: 47rpx;
		color: #333;
		padding: 32rpx 0;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			position: absolute;
			left: -16rpx;
			width: 8rpx;
			height: 24rpx;
			border-radius: 4rpx;
			background-color: #2879FF;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -47rpx;
			right: 0;
			height: 2rpx;
			background-color: #f5f5f5;
		}
	}

	.bottom-space {
		padding-bottom: 32rpx;
	}
</style>
